import { Suspense } from "react"
import { SearchParams } from "@/types/table"
import { Shell } from "@/components/shell"
import { ContactPossibleItemsTable } from "@/lib/contact-possible-items/table/contact-possible-items-table"
import { getContactPossibleItems } from "@/lib/contact-possible-items/service"
import { searchParamsCache } from "@/lib/contact-possible-items/validations"
import { DataTableSkeleton } from "@/components/data-table/data-table-skeleton"


interface ContactPossibleItemsPageProps {
  searchParams: Promise<SearchParams>
}

export default async function ContactPossibleItemsPage({
  searchParams,
}: ContactPossibleItemsPageProps) {
  const resolvedSearchParams = await searchParams
  const search = searchParamsCache.parse(resolvedSearchParams)

  const contactPossibleItemsPromise = getContactPossibleItems(search)

  return (
    <Shell className="gap-2">
      <div className="flex items-center justify-between space-y-2">
        <div className="flex items-center justify-between space-y-2">
          <div>
          <h2 className="text-2xl font-bold tracking-tight">
            담당자별 자재 관리
          </h2>
          {/* <p className="text-muted-foreground">
            기술영업 담당자별 자재를 관리합니다.
          </p> */}
        </div>
      </div>
      </div>


        <Suspense
          fallback={
            <DataTableSkeleton
              columnCount={12}
              searchableColumnCount={2}
              filterableColumnCount={3}
              cellWidths={["10rem", "10rem", "12rem", "8rem", "8rem"]}
              shrinkZero
            />
          }
        >
          <ContactPossibleItemsTable 
            contactPossibleItemsPromise={contactPossibleItemsPromise}
          />
        </Suspense>

    </Shell>
  )
}